<template>
	<view class="container">
		<text class="text-content">{{ fileContent }}</text>

	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';

	// 定义响应式数据
	const fileContent = ref(''); // 存储文件内容
	const fileUrl = ref(''); // 存储文件的网络链接

	// 页面加载时触发
	onLoad((options) => {
		// 解析传递过来的文件链接
		fileUrl.value = JSON.parse(decodeURIComponent(options.file))[0];
		// 下载并加载文件内容
		downloadAndLoadFile();
	});

	// 下载并加载文件内容的方法
	const downloadAndLoadFile = async () => {
		try {
			// 使用 uni.downloadFile 下载文件
			const downloadTask = uni.downloadFile({
				url: fileUrl.value,
				success: (res) => {
					if (res.statusCode === 200) {
						// 下载成功，读取文件内容
						readFileApp(res.tempFilePath)
							.then((content) => {
								fileContent.value = content; // 更新文件内容
							})
							.catch((err) => {
								console.error('读取文件失败', err);
								uni.showToast({
									title: '读取文件失败',
									icon: 'none',
								});
							});
					} else {
						console.error('文件下载失败，状态码：', res.statusCode);
						uni.showToast({
							title: '文件下载失败',
							icon: 'none',
						});
					}
				},
				fail: (err) => {
					console.error('文件下载失败', err);
					uni.showToast({
						title: '文件下载失败',
						icon: 'none',
					});
				},
			});
		} catch (error) {
			console.error('加载文件失败', error);
			uni.showToast({
				title: '加载文件失败',
				icon: 'none',
			});
		}
	};

	// 读取文件的工具函数（App 端）
	const readFileApp = (filePath) => {
		return new Promise((resolve, reject) => {
			plus.io.resolveLocalFileSystemURL(
				filePath,
				(entry) => {
					entry.file((file) => {
						const fileReader = new plus.io.FileReader();
						fileReader.onload = (event) => resolve(event.target.result);
						fileReader.onerror = (err) => reject(err);
						fileReader.readAsText(file, 'utf-8');
					});
				},
				(err) => reject(err)
			);
		});
	};
</script>

<style>
	.container {
		padding: 20px;
	}

	.text-content {
		height: 100vh;
		white-space: pre-wrap;
		/* 保留文本格式 */
		font-size: 18px;
		line-height: 2;
		color: #333;
		margin-bottom: 50px;
	}
</style>